<!--suppress ALL -->
<script lang="ts">
export default {
  name: "OperateMethodCodeMirror"
}
</script>

<template>
  <div style="width: 100%; height: 500px; border: 1px solid #f00">
    <Codemirror
      v-model="dataState.code"
      :autofocus="true"
      :disabled="false"
      :extensions="extensions"
      :style="{ height: '100%' }"
      class="code"
      @blur="handleClick('blur', $event)"
      @change="handleClick('change', $event)"
      @focus="handleClick('focus', $event)"
      @ready="handleClick('ready', $event)"
    />
  </div>

  <div style="height: 40px; padding: 5px; float: left;">
    <el-button plain type="primary" @click="handleUpdate">保存</el-button>
  </div>


</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs, ref} from "vue";

import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
import {oneDark} from '@codemirror/theme-one-dark'

import {DeviceOperateItem, ScriptMethod} from "@/api/repo/comp/local/types";
import {buildEngineParamDefaultValue} from "@/api/repo/comp/local/build";

const extensions = [javascript(), oneDark];

const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};


const emit = defineEmits(['update']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initData});

// 数据状态：定义
let dataState = reactive({
  code: '',
  // 表单数据
  formData: {} as any,
});


/**
 * 刷新表单
 */
function initData(entity: any) {
  dataState.formData = entity;

  dataState.code = entity.taskParam.methodScript;
}

/**
 * 确认：新增/修改实体
 */
function handleUpdate() {
  emit('update', dataState.code);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>

<style>
.code {
  width: 300px;
  height: 300px;
}
</style>
